<script setup lang="ts">
import { Empty, showSuccessToast } from "vant";
import { useI18n } from "vue-i18n";
import { onMounted, ref } from "vue";
import { ActivityAxios } from "@/api";
import NoData from "@/image/new_img/activity/no_data.svg";
import moment from "moment";
const { t } = useI18n();
import { UserStore } from "@/store";
const userStore = UserStore();
const emits = defineEmits(["isRewardsfun"]);
onMounted(() => {
  if (userStore.isLogin) {
    getCommissionsList();
  }
});

//获取无限代理的列表
const commissionsList: any = ref([]);
const getCommissionsList = () => {
  ActivityAxios.getCommissionsList().then(res => {
    commissionsList.value = res.list;
    commissionsList.value.map(item => {
      if (item.claimFlag === 1) {
        emits("isRewardsfun", true);
      }
    });
  });
};
//领取无限代理佣金
const getReceiveUnlimitedAgent = timeval => {
  ActivityAxios.getReceiveUnlimitedAgent({ dayTimeStamp: timeval })
    .then(() => {
      showSuccessToast("success");
      getCommissionsList();
    })
    .catch(err => {
      console.log("err", err);
    });
};
</script>
<template>
  <div class="nolist-frame">
    <div class="list-cintent-frame">
      <div class="list-cintent" v-for="(item, index) in commissionsList" :key="index">
        <img src=" @/image/new_img/activity/afiliado_comissao_kapian2.png" />
        <div class="getlist-content-frame">
          <div class="time-frame">
            {{ moment(item.startTime).format("YYYY-MM-DD HH:mm") }} -
            {{ moment(item.endTime).format("YYYY-MM-DD HH:mm") }}
          </div>
          <div class="getlist-frame df ai-center jc-space-between">
            <div class="title-frame">{{ t("activity.distriAgent.directCommission") }}</div>
            <div class="getlist-frame-right df ai-center">
              <div class="df df ai-center moeny-frame">
                {{ t("currencyType.pt") }}
                <div class="moeny-val-frame">{{ item.commissions / 100 }}</div>
              </div>
              <img
                v-if="item.claimFlag === 1"
                class="get-logo-frame"
                src=" @/image/new_img/activity/afiliado_botao_enable.png"
                @click="getReceiveUnlimitedAgent(item.startTime)"
              />
              <img
                v-if="item.claimFlag === 2"
                class="get-logo-frame"
                src=" @/image/new_img/activity/afiliado_botao.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Empty
      v-if="commissionsList.length === 0"
      image-size="200"
      :image="NoData"
      :description="t('gameLog.noRecordYet')"
    />
  </div>
</template>
<style lang="less" scoped>
.nolist-frame {
  width: 100%;
  height: auto;
}
.list-cintent-frame {
  width: 676px;
  height: auto;
  margin: auto;
  margin-top: 40px;
  .list-cintent {
    width: 100%;
    height: 168px;
    position: relative;
    left: 0;
    top: 0;
    margin-top: 16px;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .time-frame {
      width: 100%;
      height: 72px;
      line-height: 72px;
      padding-left: 90px;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 400;
      font-size: 28px;
    }
    .getlist-frame-right {
      margin-right: 20px;
    }
    .title-frame {
      font-size: 28px;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 400;
      padding-left: 34px;
    }
    .getlist-frame {
      width: 100%;
      height: 100px;
    }
    .moeny-frame {
      color: rgba(255, 255, 255, 0.45);
      font-size: 24px;
    }
    .moeny-val-frame {
      color: #ffffff;
      font-size: 36px;
      margin-left: 10px;
    }
    .get-logo-frame {
      width: 166px;
      height: 82px;
      position: relative;
    }
  }
  .getlist-content-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
